<template>
  <div class="weui-panel full" style="background: #fff">
    <div class="weui-cell weui-flex">
      <div class="weui-flex__item"><label class="weui-label">上级代理ID</label></div>
      <div class="weui-flex__item_2"><input class="weui-input" v-model="upperAgentID" @keydown.enter="queryUpperAgent"
        type="text" maxlength="6" placeholder="请输入"></div>
      <div class="weui-flex__item"><a class="weui-btn weui-btn_primary" @click="queryUpperAgent">查询</a></div>
    </div>
    <div class="weui-flex" v-show="hasGetUpperAgent">
      <div class="weui-flex__item">
        <img class="list-user-img" :src="upperAgentHeadUrl" alt="">
      </div>
      <div class="weui-flex__item_2" style="line-height: 56px;">{{upperAgentNickName}}</div>
    </div>
    <div class="weui-flex" v-show="getUpperAgentErr">
      <div class="weui-flex__item">
        {{getUpperAgentErrMsg}}
      </div>
    </div>
    <div class="weui-cells weui-cells_form">
      <div class="weui-cell" :class="{'weui-cell_warn': nameInvalid}">
          <div class="weui-cell__hd">
            <label class="weui-label">姓名</label>
          </div>
          <div class="weui-cell__bd">
            <input class="weui-input text-left width-80" v-model="info.realName" type="text" maxlength="20" placeholder="姓名">
          </div>
          <div class="weui-cell__ft">
            <!-- <i class="weui-icon-warn"></i> -->
          </div>
        </div>
      <div class="weui-cells weui-cells_form">
        <div class="weui-cell" :class="{'weui-cell_warn': telphoneInvalid}">
          <div class="weui-cell__hd"><label class="weui-label">手机号码</label></div>
          <div class="weui-cell__bd">
            <input class="weui-input text-left width-80" required v-model="info.telphone" maxlength="11"
             type="number" pattern="[0-9]*" placeholder="手机号码">
          </div>
          <div class="weui-cell__ft">
            <!-- <i class="weui-icon-warn"></i> -->
          </div>
        </div>

         <div class="weui-cell"  :class="{'weui-cell_warn': bankCardInvalid}">
          <div class="weui-cell__hd">
            <label class="weui-labe">银行卡号</label>
          </div>
          <div class="weui-cell__bd">
            <input class="weui-inputl text-left width-80" v-model="info.bankCard" type="number" pattern="[0-9]*" maxlength="30" placeholder="银行卡号">
          </div>
          <div class="weui-cell__ft">
            <!-- <i class="weui-icon-warn"></i> -->
          </div>
        </div>
        <div class="weui-cell"  @click="showPicker('bank')" :class="{'weui-cell_warn': bankNameInvalid}">
          <div class="weui-cell__hd">
            <label class="weui-label">开户银行</label>
          </div>
          <div class="weui-cell__bd address-input bank">
            <span class="weui-input text-left width-80 dashed-border">{{info.bankName}} </span>
            <!-- <span>银行</span> -->
          </div>
          <div class="weui-cell__ft">
            <!-- <i class="weui-icon-warn"></i> -->
          </div>
        </div>
        <div class="weui-cell" :class="{'weui-cell_warn': bankNameInvalid}">
          <div class="weui-cell__hd">
            <label class="weui-label">开户行分行</label>
          </div>
          <div class="weui-cell__bd address-input subbranch">
            <input class="weui-input text-left width-80" v-model="info.subbranch" type="text" placeholder="" maxlength="20">
            <!-- <span>分(支)行</span> -->
          </div>
          <div class="weui-cell__ft">
            <!-- <i class="weui-icon-warn"></i> -->
          </div>
        </div>
       

        <div class="weui-cell" @click="showPicker('addr')"  :class="{'weui-cell_warn': addressInvalid}">
          <div class="weui-cell__hd">
            <label class="weui-label">开户行地址</label>
          </div>
          <div class="weui-cell__bd address-input subbranch">
            <span class="weui-input text-left dashed-border width-80">{{info.province}}{{info.city}}{{info.district}}</span>
            <!-- <span>省</span> -->
          </div>
          <!-- <div class="weui-cell__bd address-input city">
            <input disabled class="weui-input text-left" v-model="info.city" type="text" maxlength="60" placeholder="">
            <span>市</span>
          </div> -->
          <div class="weui-cell__ft">
            <!-- <i class="weui-icon-warn"></i> -->
          </div>
        </div>
      <div style="padding: 10px;">
        <a class="weui-btn weui-btn_primary" :class="{'weui-btn_disabled': !canSubmit}" @click="showBankQuery = true">提交</a>
      </div>
    </div>
        <awesome-picker
          ref="pickerBank"
          :data="bankData"
          @cancel="handlePickerCancel"
          @confirm="handlePickerConfirm">
        </awesome-picker>
        <awesome-picker
          ref="pickerAddr"
          :data="addrData"
          @cancel="handlePickerCancel"
          @confirm="handlePickerConfirm">
        </awesome-picker>

        <div class="weui-mask weui-mask--visible" v-if="showBankQuery">
      <div class="weui-dialog weui-dialog--visible">
        <div class="weui-dialog__hd">
          <strong class="weui-dialog__title">提示</strong>
        </div>
        <div class="weui-dialog__bd" style="text-align: left;">
          <p class="branch-text">银行卡开户行信息查询步骤</p>
          <p class="branch-text">邮政储蓄银行：拨打客服电话95580 → 按1 → 按4→ 输入卡号→按# 结束→按1信息发送至手机</p>
          <p class="branch-text">农业银行：拨打客服电话95599→按5→按1→输入卡号→按# 结束</p>
          <p class="branch-text">中国银行：拨打客服电话95566→按2→按1→按1→输入卡号→按# 结束</p>
          <p class="branch-text">建设银行：拨打客服电话95533→按1→按1→按3→输入卡号→按# 结束</p>
          <p class="branch-text">工商银行：拨打客服电话95588→按 #→按1→按3→输入卡号→按# 结束</p>
          <p class="branch-text">招商银行：拨打客服电话95555→按 3→按1→按2→输入卡号→按# 结束</p>

          <p style="color: #f44336;">必须正确填写支行信息, 否则无法发放工资.</p>

          <div class="check-box-branch">
            <input id="color-input-red" class="chat-button-location-radio-input" type="checkbox" name="color-input-red" v-model="isFullyNoted" />
            <label for="color-input-red">
              我已了解以上信息
            </label >
          </div>
        </div>
        <div class="weui-dialog__ft">
          <button @click="onTipsConfirm" :disabled="!isFullyNoted" class="weui-btn":class="!isFullyNoted ? 'weui-btn_default' : 'weui-btn_primary'">确定</button>
          <button @click="showBankQuery = false; isFullyNoted = false" class="weui-btn weui-btn_default" style="margin-top: 0;" >取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'Vuex'
import Addr from '../lib/address';

const BankData = ['中国银行', '中国工商银行', '中国建设银行', '中国农业银行', '招商银行', '交通银行', '中国民生银行', '中信银行', '浦东发展银行', '兴业银行', '平安银行', '广发银行', '中国光大银行', '中国邮政储蓄银行', '长沙银行'];
export default {
  data() {
    return {
      upperAgentID: '',
      upperAgentIDInvalid: false,
      phoneNumber: '',
      phoneNumberInvalid: false,
      name: '',
      nameInvalid: false,
      bankName: '',
      bankNameInvalid: false,
      bankCardNumber: '',
      bankCardNumberInvalid: false,
      alipayAccount: '',
      // 是否已经查询了上级代理ID
      hasGetUpperAgent: false,
      upperAgentNickName: '',
      upperAgentHeadUrl: '',
      getUpperAgentErr: false,
      getUpperAgentErrMsg: '',
      bankData: [BankData],
      addrData: Addr,
      showBankQuery: false,
      isFullyNoted: false,
    }
  },
  mounted() {
  },
  methods: {
    queryUpperAgent() {
      const pattern = /^[0-9]*$/
      if (this.upperAgentID.length !== 6 || !pattern.test(this.upperAgentID)) {
        $.alert('上级代理ID是一个6位数的数字');
      }
      const send = {
        upperAgentID: this.upperAgentID,
        token: this.token,
        areaCode: this.areaCode
      }
      this.hasGetUpperAgent = false
      this.api.agentApply.queryUpperAgent(send).then(res => res.json()).then(data => {
        console.log(data);
        this.getUpperAgentErr = data.errorCode !== 0
        console.log('getUpperAgentErr', this.getUpperAgentErr);
        if (this.getUpperAgentErr) {
          this.getUpperAgentErrMsg = data.message
          return
        }
        this.hasGetUpperAgent = true
        this.upperAgentHeadUrl = data.source.headUrl
        this.upperAgentNickName = data.source.nickname
      })
    },
        // 读完提示后确定才提交
    onTipsConfirm() {
      this.showBankQuery = false;
      this.submit();
    },
    submit() {
      console.log('canSubmit', this.canSubmit);
      if (!this.hasGetUpperAgent) {
        $.alert('请先查询上级代理')
      }
      if (!this.canSubmit) {
        return
      }
      const send = {
        superuid: this.upperAgentID,
        telphone: this.phoneNumber,
        realname: this.name,
        bankname: this.bankName,
        bankcard: this.bankCardNumber,
        alipayaccount: this.alipayAccount,
        token: this.token,
        areaCode: this.areaCode
      }
      $.confirm(`确定向上级代理  ${this.upperAgentNickName}  申请?`, () => {
        this.api.agentApply.apply(send).then(res => res.json()).then(data => {
          console.log(data);
          if (data.errorCode) {
            $.alert(data.message)
            return;
          }
          $.alert('申请成功!')
        })
      })
    }
  },
  computed: {
    ...mapState(['api', 'token', 'areaCode']),
    canSubmit() {
      this.upperAgentIDInvalid = this.upperAgentID === ''
      this.phoneNumberInvalid = this.phoneNumber === ''
      this.nameInvalid = this.name === ''
      this.bankNameInvalid = this.bankName === ''
      this.bankCardNumberInvalid = this.bankCardNumber === ''
      return !(this.upperAgentIDInvalid || this.phoneNumberInvalid ||
       this.nameInvalid || this.bankNameInvalid || this.bankCardNumberInvalid) && this.hasGetUpperAgent
    }
  },
  components: {
    
  }
}

</script>

<style lang="less">
.weui-dialog {
  width: 90%!important;
  max-width: 400px;
}
</style>